<template>
	<view class="goods-evaluate-item">
		<view class="user">
			<image class="avatar" :src="evaluate.avatar" mode="aspectFill"></image>
			<view class="info">
				<view class="name">
					{{evaluate.nickname}}
				</view>
				<uni-rate readonly :value="evaluate.score" size="14"></uni-rate>
			</view>
			<text class="time">{{evaluate.create_time}}</text>
		</view>
		<view class="evaluate-text">
			{{evaluate.content}}
		</view>
		<view class="img-grid" v-if="evaluate.images && evaluate.images.length>0">
			<view class="grid-item" v-for="(item, index) in evaluate.images" :key="index">
				<view class="img-box">
					<image class="thumb" mode="aspectFill" :src="item"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		evaluate: {
			type: Object,
			default: () => { //定义默认值
				return []
			}
		}
	})
</script>

<style lang="scss">
	.goods-evaluate-item {
		padding: $margin-24 0;

		.user {
			@include f-between;

			.avatar {
				width: 70rpx;
				height: 70rpx;
				background-color: $bg-color;
				border-radius: $radius-circle;
			}

			.info {
				flex: 1;
				margin-left: $margin-24;

				.name {
					color: $main-color;
				}
			}

			.time {
				font-size: $font-24;
				color: $tips-color;
			}
		}

		.evaluate-text {
			margin-top: $margin-16;
		}

		.img-grid {
			display: flex;
			flex-wrap: wrap;
			margin-top: $margin-12;

			.grid-item {
				position: relative;
				padding: $margin-8;
				width: calc(100% / 3);
				box-sizing: border-box;

				.img-box {
					position: relative;
					overflow: hidden;
					width: 100;
					height: 0;
					padding-top: 100%;
					background-color: $bg-color;
					border-radius: $radius-8;

					.thumb {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>